<!DOCTYPE html>
<html lang="utf-8">
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<title>网校在线学习平台</title>
		<link href="../res/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
		<link href="../res/css/reset.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="../res/js/jquery-1.11.3.min.js"></script>
		<script type="text/javascript" src="../res/js/bootstrap.min.js"></script>
		
		<!--[if lt IE 9]>
		  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
		<![endif]-->
		
		<link rel="icon" type="image/png" href="../res/i/ico.png" sizes="16x16">
		
		<script type="text/javascript">
		CONETXT_PATH = '..';
		</script>
	</head>

	<body>
		<div class="f-header">
	<div class="f-header-box clearfix">
		<a href=".."  class="logo" title="网校在线学习平台"></a>
		<nav class="header-nav">
			<a href=".." class="header-nav-item">首 页</a>
			<a href="../course/list.html" class="header-nav-item">课 程</a>
			<a href="../course/learn.html" class="header-nav-item">Java</a>
			<a href="../user/home.html" class="header-nav-item">我的</a>
			<a href="../cms/index.html" target="_blank" class="header-nav-item">教师端</a>
			<a href="../opt/index.html" target="_blank" class="header-nav-item">运营</a>
		</nav>
	
		<nav class="header-nav" style="float:right">
			<a href="#myModal" class="header-nav-item"  data-toggle="modal" onclick="login();"  style="margin-right:0px;font-size:14px;">登录</a>
			<a href="#myModal" class="header-nav-item" data-toggle="modal" onclick="registe();"  style="margin-left:0px;font-size:14px;">注册</a>
	        <a href="#" class="header-nav-item"  style="margin-left:0px;font-size:14px;" id="userdetail">头像</a>
		</nav>
		
	</div>
</div>

		<div class="f-main clearfix">
			<div class="main-course-left">
					<div class="course-info">
						<div class="course-title" style="font-size: 24px;">1-1 感受神秘的涟漪效果</div>
						
						<div class="course-video">
							<video src="../res/demo.mp4" width="100%" height="100%" controls preload></video>
						</div>
						
						<div class="course-menu">
							<a  href="javascript:void(0)"><span class="menu-item  cur">评论</span></a>
						</div>
				</div>
				
				
				<div>
						<div class="comment clearfix">
							<div class="comment-header"><img class="lecturer-uimg" src="../res/i/header.jpg"></div>
							<div class="comment-main">
								<div class="user-name">我是张三</div>
								<div class="comment-content">这门课真实用！一个列表嵌套好多种布局的时候，用recyclerview控件优雅实现，效率果然提高不少，老板肯定又会夸我，啊哈哈！！！</div>
								<div class="comment-footer">
									<span>时间：2016-12-05 </span>
									<a href="">2-2 我是java第二节</a>
								</div>
							</div>
						</div>		
								
						<div class="comment clearfix">
							<div class="comment-header"><img class="lecturer-uimg" src="../res/i/header.jpg"></div>
							<div class="comment-main">
								<div class="user-name">我是张三</div>
								<div class="comment-content">这门课真实用！一个列表嵌套好多种布局的时候，用recyclerview控件优雅实现，效率果然提高不少，老板肯定又会夸我，啊哈哈！！！</div>
								<div class="comment-footer">
									<span>时间：2016-12-05 </span>
									<a href="">2-2 我是java第二节</a>
								</div>
							</div>
						</div>		
				</div>
				
			</div>
			
			
			<div class="main-course-right"  >
				<h4 class="mt-50">所有章节</h4>
				<div class="video-course-fix-parent">
					<div class="video-course-fix">
						<div class="chapter" style="padding: 0px ;border: none;">
							<a href="javascript:void(0);" class="js-open">
								<h3>
									<strong>第1章 课程介绍</strong>
									<span class="drop-down">▼</span> 
								</h3>
							</a>
							<ul class="chapter-sub" style="padding-left:10px;">
								<a href="../course/video.html" > 
									<li class="ellipsis video-li"><i class="icon-video">▶</i> 1-1 使用RecyclerView优雅实现复杂布局-课程介绍 (06:46)</li>
								</a>
								
								<a href="/video/13038" > 
									<li class="ellipsis  video-li"><i class="icon-video">▶</i> 1-2 包括录制到文件、播放文件，可以实现类似于微信的语音消息发送与播放 (06:46)</li>
								</a>
							</ul>
						</div>
					
						<div class="chapter" style="padding: 0px ;border: none;">
							<a href="javascript:void(0);" class="js-open">
								<h3>
									<strong>第2章 课程介绍</strong>
									<span class="drop-down">▼</span> 
								</h3>
							</a>
							<ul class="chapter-sub" style="padding-left:10px;">
								<a href="../course/video.html" > 
									<li class="ellipsis video-li"><i class="icon-video">▶</i> 1-1 使用RecyclerView优雅实现复杂布局-课程介绍 (06:46)</li>
								</a>
								
								<a href="/video/13038" > 
									<li class="ellipsis  video-li"><i class="icon-video">▶</i> 1-2 包括录制到文件、播放文件，可以实现类似于微信的语音消息发送与播放 (06:46)</li>
								</a>
							</ul>
						</div>
					
						<div class="chapter" style="padding: 0px ;border: none;">
							<a href="javascript:void(0);" class="js-open">
								<h3>
									<strong>第3章 课程介绍</strong>
									<span class="drop-down">▼</span> 
								</h3>
							</a>
							<ul class="chapter-sub" style="padding-left:10px;">
								<a href="../course/video.html" > 
									<li class="ellipsis video-li"><i class="icon-video">▶</i> 1-1 使用RecyclerView优雅实现复杂布局-课程介绍 (06:46)</li>
								</a>
								
								<a href="/video/13038" > 
									<li class="ellipsis  video-li"><i class="icon-video">▶</i> 1-2 包括录制到文件、播放文件，可以实现类似于微信的语音消息发送与播放 (06:46)</li>
								</a>
							</ul>
						</div>
					
						<div class="chapter" style="padding: 0px ;border: none;">
							<a href="javascript:void(0);" class="js-open">
								<h3>
									<strong>第4章 课程介绍</strong>
									<span class="drop-down">▼</span> 
								</h3>
							</a>
							<ul class="chapter-sub" style="padding-left:10px;">
								<a href="../course/video.html" > 
									<li class="ellipsis video-li"><i class="icon-video">▶</i> 1-1 使用RecyclerView优雅实现复杂布局-课程介绍 (06:46)</li>
								</a>
								
								<a href="/video/13038" > 
									<li class="ellipsis  video-li"><i class="icon-video">▶</i> 1-2 包括录制到文件、播放文件，可以实现类似于微信的语音消息发送与播放 (06:46)</li>
								</a>
							</ul>
						</div>
					
						<div class="chapter" style="padding: 0px ;border: none;">
							<a href="javascript:void(0);" class="js-open">
								<h3>
									<strong>第5章 课程介绍</strong>
									<span class="drop-down">▼</span> 
								</h3>
							</a>
							<ul class="chapter-sub" style="padding-left:10px;">
								<a href="../course/video.html" > 
									<li class="ellipsis video-li"><i class="icon-video">▶</i> 1-1 使用RecyclerView优雅实现复杂布局-课程介绍 (06:46)</li>
								</a>
								
								<a href="/video/13038" > 
									<li class="ellipsis  video-li"><i class="icon-video">▶</i> 1-2 包括录制到文件、播放文件，可以实现类似于微信的语音消息发送与播放 (06:46)</li>
								</a>
							</ul>
						</div>
					</div>
				</div>
				
			</div>
			
		</div>
		
		<#include "./common/footer.html">
		
		<script type="text/javascript">
			$(function(){
				$('.chapter li').hover(function(){
					$(this).find('.icon-video').css('color','#0089D2');
				},function(){
					$(this).find('.icon-video').css('color','#777');
				});
				
				$('.js-open').click(function(){
					var display = $(this).parent().find('ul').css('display');
					if(display == 'none'){
						$(this).parent().find('ul').css('display','block');
						$(this).find('.drop-down').html('▼');
					}else{
						$(this).parent().find('ul').css('display','none');
						$(this).find('.drop-down').html('▲');
					}
				});
			});	
		</script>
		
	</body>
	
</html>
